<template>
    <view class="goods-detail-container" v-if="goods_detail.goods_name">
        <!--轮播图区域-->
        <swiper :indicator-dots="true" indicator-active-color="#ff93a7" :autoplay="true" :interval="2000"
                :duration="1000" :circular="true">
            <swiper-item v-for="(item,i) in goods_detail.pics" :key="i">
                <image :src="item.pics_big" @click="preview(i)"></image>
            </swiper-item>
        </swiper>
        <!--商品信息区域-->
        <view class="goods-info">
            <!--价格-->
            <view class="goods-price">￥{{ Number(goods_detail.goods_price).toFixed(2) }}</view>
            <!--信息主体-->
            <view class="goods-info-main">
                <!--商品描述-->
                <view class="goods-desc">{{ goods_detail.goods_name }}</view>
                <!--收藏-->
                <view class="goods-favorite">
                    <uni-icons type="star" size="20"></uni-icons>
                    <text>收藏</text>
                </view>
            </view>
            <!--运费-->
            <view class="goods-freight">快递：免运费</view>
        </view>
        <!--商品图片描述-->
        <rich-text class="goods-image-info" :nodes="goods_detail.goods_introduce"></rich-text>
        <!--底部导航栏-->
        <view class="footer-nav">
            <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
                           @buttonClick="buttonClick"/>
        </view>
    </view>
</template>

<script>
    import {mapState, mapMutations, mapGetters} from "vuex";

    export default {
        computed: {
            ...mapState('cart', []),
            ...mapGetters('cart', ['total'])
        },
        watch: {
            total: {
                immediate: true,
                handler(newValue) {
                    const findResult = this.options.find(item => item.text === '购物车')
                    if (findResult) {
                        findResult.info = newValue
                    }
                }
            }
        },
        data() {
            return {
                goods_detail: {},
                options: [
                    {
                        icon: 'shop',
                        text: '店铺',
                        infoBackgroundColor: '#007aff',
                        infoColor: "red"
                    },
                    {
                        icon: 'cart',
                        text: '购物车',
                        info: 0
                    }
                ],
                buttonGroup: [
                    {
                        text: '加入购物车',
                        backgroundColor: '#ff0000',
                        color: '#fff'
                    },
                    {
                        text: '立即购买',
                        backgroundColor: '#ffa200',
                        color: '#fff'
                    }
                ]
            }
        },
        onLoad(options) {
            const goods_id = options.goods_id
            this.getGoodsDetail(goods_id)
        },
        methods: {
            ...mapMutations('cart', ['addToCart']),
            // 获取商品详情事件
            async getGoodsDetail(goods_id) {
                const res = await uni.$http.get('/api/public/v1/goods/detail', {goods_id})
                if (res.data.meta.status !== 200) return uni.$showMsg()
                res.data.message.goods_introduce = res.data.message.goods_introduce.replace(/<img /g, '<img style="display: block;"').replace(/webp /g, 'jpg')
                this.goods_detail = res.data.message
            },
            // 轮播图图片预览事件
            preview(i) {
                uni.previewImage({
                    current: i,
                    urls: this.goods_detail.pics.map(x => x.pics_big)
                })
            },
            // 点击店铺或购物车事件
            onClick(e) {
                if (e.content.text === '购物车') {
                    uni.switchTab({
                        url: '/pages/cart/cart'
                    })
                }
            },
            // 点击加入购物车或立即购买按钮事件
            buttonClick(e) {
                if (e.content.text === '加入购物车') {
                    uni.$showMsg('已加入购物车',1500,'success')
                    const goods = {
                        goods_id: this.goods_detail.goods_id,
                        goods_name: this.goods_detail.goods_name,
                        goods_price: this.goods_detail.goods_price,
                        goods_count: 1,
                        goods_small_logo: this.goods_detail.goods_small_logo,
                        goods_state: true
                    }
                    this.addToCart(goods)
                }
            }
        },
    }
</script>

<style lang="scss">
    .goods-detail-container {
        padding-bottom: 50px;

        // 轮播图区域
        swiper {
            height: 750rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        // 商品信息区域
        .goods-info {
            padding: 10px 0 10px 10px;

            .goods-price {
                font-size: 20px;
                font-weight: bold;
                color: #cc0404;
                margin: 10px 0;
            }

            .goods-info-main {
                display: flex;
                justify-content: space-between;

                .goods-desc {
                    font-size: 13px;
                    margin-right: 10px;
                    /*首行缩进两字符*/
                    text-indent: 2em;
                    /*强制英文单词断行*/
                    word-break: break-all;
                    /*超出的部分隐藏*/
                    overflow: hidden;
                    /*超出的部分用省略号显示*/
                    text-overflow: ellipsis;
                    /*弹性伸缩盒子模型显示*/
                    display: -webkit-box;
                    /*限制在一个块元素显示的文本的行数*/
                    -webkit-line-clamp: 3;
                    /*设置或检索伸缩盒对象的子元素的排列方式*/
                    -webkit-box-orient: vertical;
                }

                .goods-favorite {
                    width: 120px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    font-size: 12px;
                    color: #808080;
                    border-left: 1px solid #efefef;
                }
            }

            .goods-freight {
                font-size: 14px;
                color: #808080;
                margin-top: 10px;
            }
        }
    }

    // 底部导航栏区域
    .footer-nav {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99999;

        .uni-tab__cart-box {
            background-color: #efefef;
        }
    }
</style>
